{% extends "website/base.html" %}
{% block content %}
<style>
  .staff-shell{display:flex;gap:16px;align-items:flex-start}
  .staff-sidebar{position:sticky;top:16px;min-width:260px;max-width:260px}
  .staff-main{flex:1;min-width:0}
  .staff-nav{display:flex;flex-direction:column;gap:6px}
  .staff-nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;text-decoration:none}
  .staff-nav a:hover{background:rgba(255,255,255,0.06)}
  .staff-nav a.active{background:rgba(255,255,255,0.10)}
  .staff-nav .muted{opacity:.75;font-size:12px;margin:6px 0 0 0}
  .staff-badge{margin-left:auto;font-size:12px;opacity:.75}

  .tabs{display:flex;gap:6px;flex-wrap:wrap}
  .tab{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;text-decoration:none;border:1px solid rgba(255,255,255,0.14);opacity:.9}
  .tab:hover{opacity:1}
  .tab.active{background:rgba(255,255,255,0.10);border-color:rgba(255,255,255,0.22);font-weight:700}

  .sort-link{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:#fff}
  .sort-icon{font-size:12px;opacity:.8;display:inline-block;min-width:14px;text-align:center}

  /* Sticky table headers (hospital admin feel) */
  .table-wrap{overflow:auto;border-radius:14px}
  .table-wrap thead th{
    position:sticky;top:0;z-index:3;
    background:#123e50; color:#fff;
    backdrop-filter: blur(6px);
  }
  .table-wrap thead th::after{
    content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
    background:rgba(255,255,255,0.10);
  }

  /* Clickable sort indicators with subtle animation */
  .sort-icon{transition: transform .16s ease, opacity .16s ease; will-change:transform}
  .sort-link{cursor:pointer}
  .sort-link.is-active .sort-icon{opacity:1;transform:translateY(-1px) scale(1.08)}
  .sort-link.just-clicked .sort-icon{animation: sortPulse .22s ease}
  @keyframes sortPulse{
    0%{transform:translateY(0) scale(1)}
    50%{transform:translateY(-2px) scale(1.18)}
    100%{transform:translateY(-1px) scale(1.08)}
  }


  @media (max-width: 980px){
    .staff-shell{flex-direction:column}
    .staff-sidebar{position:relative;top:auto;min-width:0;max-width:none;width:100%}
  }
</style>

<section class="section">
  <div class="staff-shell">
    <aside class="card staff-sidebar">
      {% include "website/staff/sidebar.html" %}
    </aside>

    <main class="staff-main">
      {% block staff_content %}{% endblock %}
    </main>
  </div>
</section>

<script>
(function(){
  function params(){
    return new URLSearchParams(window.location.search);
  }
  function setParam(k,v){
    const p = params();
    if(v===null || v===undefined || v===""){
      p.delete(k);
    }else{
      p.set(k,v);
    }
    p.delete("page"); // reset pagination on filter/sort changes
    const qs = p.toString();
    window.location.search = qs ? ("?"+qs) : "";
  }

  // Preset tabs/buttons
  document.addEventListener("click", function(e){
    const a = e.target.closest("[data-preset]");
    if(!a) return;
    e.preventDefault();
    setParam("preset", a.getAttribute("data-preset"));
  });

  // Export buttons
  document.addEventListener("click", function(e){
    const a = e.target.closest("[data-export]");
    if(!a) return;
    e.preventDefault();
    setParam("export", a.getAttribute("data-export"));
  });

  // Sorting (click header)
  document.addEventListener("click", function(e){
    const a = e.target.closest("[data-sort]");
    if(!a) return;
    e.preventDefault();
    const field = a.getAttribute("data-sort");
    const p = params();
    const curSort = p.get("sort") || "";
    const curDir = (p.get("dir") || "desc").toLowerCase();
    let nextDir = "desc";
    if(curSort === field){
      nextDir = (curDir === "desc") ? "asc" : "desc";
    }
    p.set("sort", field);
    p.set("dir", nextDir);
    p.delete("page");
    p.delete("export");
    window.location.search = "?"+p.toString();
  });

  // Mark active preset tabs
  (function(){
    const p = params();
    const preset = p.get("preset") || "";
    document.querySelectorAll("[data-preset]").forEach(function(el){
      const v = el.getAttribute("data-preset") || "";
      if(v && v === preset){
        el.classList.add("active");
      }else{
        el.classList.remove("active");
      }
    });
  })();

  // Sort icons ▲▼
  (function(){
    const p = params();
    const sort = p.get("sort") || "";
    const dir = (p.get("dir") || "desc").toLowerCase();
    document.querySelectorAll("[data-sort]").forEach(function(el){
      const field = el.getAttribute("data-sort") || "";
      const icon = el.querySelector(".sort-icon");
      if(!icon) return;
      if(field === sort){
        icon.textContent = (dir === "asc") ? "▲" : "▼";
      }else{
        icon.textContent = "↕";
      }
    });
  })();

})();
</script>
{% endblock %}